/*
 * @Author: shiguo
 * @Date: 2022-09-14 14:02:03
 * @LastEditors: shiguo
 * @LastEditTime: 2022-09-29 17:55:00
 * @FilePath: /@aks-dev/taro-h5/lib/DateMonthPicker/index.tsx
 */
import * as  React from "react";
import { Picker } from '@tarojs/components'
import moment from 'moment'
import type { DateMonthPickerProps } from '../../types/DateMonthPicker'



type DsProp = number[]

export const DateMonthPicker:
  React.FC<DateMonthPickerProps>

  = props => {

    const {
      defaultDateTimeFormat = 'YYYY-MM',
      defaultDateTime = moment()
    } = props

    const initDataList = (defaultMoment: moment.Moment = moment()): Array<DsProp> => {
      let year = Number(defaultMoment.format('YYYY'))
      let years: any[] = Array.from(({ length: 4 }), (_, k) => (year + k - 1) + '年')
      let months: any[] = Array.from(({ length: 12 }), (_, k) => (k + 1) + '月')
      let ds = [years, months]
      return ds
    }


    const initIndex = (defaultMoment: moment.Moment = moment()): number[] => {
      let yearIndex = 1
      let monthIndex = Number(defaultMoment.format('MM')) - 1
      let ds = [yearIndex, monthIndex]
      return ds
    }


    // let defaultDateTime = moment()

    // if (props.defaultDateTime) {
    //   switch (typeof props.defaultDateTime) {
    //     case 'string':
    //       defaultDateTime = moment(props.defaultDateTime, defaultDateTimeFormat)
    //       break;
    //     case 'object': {
    //       if (moment.isMoment(props.defaultDateTime)) {
    //         defaultDateTime = props.defaultDateTime
    //       } else if (props.defaultDateTime instanceof Date) {
    //         defaultDateTime = moment.utc(props.defaultDateTime)
    //       }
    //     }
    //     default: break;
    //   }
    // }

    const [state, dispatch] = React.useReducer((state, action) => ({ ...state, ...action }), {
      dataList: initDataList(moment()),
      index: initIndex(moment())
    })

    React.useEffect(() => {
      let _defaultDateTime = moment()
      switch (typeof props.defaultDateTime) {
        case 'string':
          _defaultDateTime = moment(props.defaultDateTime, defaultDateTimeFormat)
          dispatch({
            dataList: initDataList(_defaultDateTime),
            index: initIndex(_defaultDateTime)
          })
          break;
        case 'object': {
          if (moment.isMoment(props.defaultDateTime)) {
            // _defaultDateTime = props.defaultDateTime
          } else if (props.defaultDateTime instanceof Date) {
            _defaultDateTime = moment.utc(props.defaultDateTime)
            dispatch({
              dataList: initDataList(_defaultDateTime),
              index: initIndex(_defaultDateTime)
            })
          }
        }
        default: break;
      }

    }, [defaultDateTime])


    return React.createElement(
      Picker,
      {
        mode: 'multiSelector',
        range: state.dataList,
        value: state.index,
        onChange: e => {
          let year = state.dataList[0][e.detail.value[0]]
          let month = state.dataList[1][e.detail.value[1]]
          let dateTime = moment(`${year}-${month}`, 'YYYY-M').format(defaultDateTimeFormat)
          if (props.onValueChange) {
            props.onValueChange(dateTime)
          }
        },
        onColumnChange: e => {
          state.index[e.detail.column] = e.detail.value
          let dataList = state.dataList.map(i => i)
          dispatch({ dataList })
        },
      },
      props.children
    )

  }